import React from 'react';
import Router from 'next/router';
import { SearchBar, List } from 'antd-mobile';
import axios from 'axios';
import { getRequest } from '../../../tools/requests';

import './index.css';

const Item = List.Item;

class CustomSearchBar extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			docHeight: 0,
			isShowAutoBlock: false,
			searchResult: [],
			currentSearchVal: '',
		}
	}
	componentDidMount() {
		// this.autoFocusInst.focus();
		this.setState({ docHeight: document.documentElement.clientHeight });
		// this.document = document.body;
	}
	handleCancel = () => {
		Router.back()
	}
	handleChange(val) {
		// if (val.length > 0) {
		// 	this.getSearchResult(val);
		// }else {
		// 	this.setState({ isShowAutoBlock: false, currentSearchVal: val })
		// }
		this.setState({currentSearchVal: val})
	}
	searchSingleResult(item) {
		this.props.searchSingleResult(item);
		this.setState({ isShowAutoBlock: false, currentSearchVal: item });
	}
	handleClear(val) {
		this.setState({ isShowAutoBlock: false, currentSearchVal: '' })
	}
	handleSubmit(val) {
		if (val.length > 0) {
			this.props.searchSingleResult(val);
			this.setState({ isShowAutoBlock: false, currentSearchVal: val });
		}
	}
	async getSearchResult(val) {
		const result = await getRequest("search_goods/", {searchName: val})

		if (result.result_list && result.result_list.length > 0) {
				const searchResult = result.result_list;
				this.setState({ searchResult }, () => {
					this.setState({ isShowAutoBlock: true, currentSearchVal: val })
				})
		}else {
			this.setState({
				searchResult: ['暂无搜索到您需要的商品']
			}, () => {
				this.setState({ isShowAutoBlock: true, currentSearchVal: val })
			})
		}
	}
	render() {
		const { currentSearchVal } = this.state;
		return (
			<div>
				<SearchBar 
					className="search-block" 
					placeholder="在此键入要查询的商品"
					showCancelButton={true}
					onCancel={this.handleCancel}
					onChange={this.handleChange.bind(this)}
					value={currentSearchVal}
					onClear={this.handleClear.bind(this)}
					onSubmit={this.handleSubmit.bind(this)}
					cancelText="首页"
				/>
				{/* <div style={{display: this.props.isHomePage ? 'none' : 'block'}}>
					<div 
						className="auto-search-result" 
						style={{ 
							height: docHeight !== 0 ? docHeight - 44 : 0,
							display: isShowAutoBlock ? 'block' : 'none'
						}}						
					>
						<List className="my-list">
							{
								(searchResult.length > 0 && searchResult[0] !== "暂无搜索到您需要的商品") ? searchResult.map((item, index) => (
									<Item 
										key={index} 
										extra={<img src="../../../static/images/coupon-1.png" />}
										onClick={this.searchSingleResult.bind(this, item)}
									>
										{ item }
									</Item>
								))
								:
								(
									<Item 
										key={searchResult[0]} 
									>
										{ searchResult[0] }
									</Item>
								)
							}
						</List>
					</div>
				</div> */}
			</div>
		)
	}
}

export default CustomSearchBar